<template>
    <div>
      <van-nav-bar
        title="设置"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickLeft"
      />
      <van-cell is-link @click="showPopup">头像</van-cell>
      <van-popup v-model:show="show" position="top" :style="{ height: '30%' }" >
        <div>
        <el-upload
          class="upload-pic"
          :action="domain"
          :data="QiniuData"
          :on-remove="handleRemove"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :before-remove="beforeRemove"
          :before-upload="beforeAvatarUpload"
          :limit="1"
          multiple
          :on-exceed="handleExceed"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">选择图片</el-button>
        </el-upload>
        </div>
      </van-popup>
      <van-cell is-link to="/updateuserName">昵称<span style="float: right">{{userName}}</span></van-cell>
      <van-cell is-link  @click="showPopup1">生日</van-cell>
      <van-popup v-model:show="show1" position="bottom" :style="{ height: '30%' }">
        <div>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="updatebirthday"
        />
        </div>
      </van-popup>
      <van-cell is-link to="/user_address">收货地址<span style="float: right">修改/添加</span></van-cell>
    </div>
</template>

<script>
  import { Notify } from 'vant';
  import axios from  'axios'
    export default {
      name: "personal_information",

      data() {
        return {
          minDate: new Date(1980, 0, 1),
          maxDate: new Date(2021, 10, 1),
          currentDate: new Date(),
          show1:false,
          userid:sessionStorage.getItem("id"),
          userName:sessionStorage.getItem("userName"),
          show: false,
          file:'',
          loading: false,
          QiniuData: {
            //key: '' ,//图片名字处理
            token: "",//七牛云token
            data: {}
          },
          domain: "http://upload-z1.qiniup.com", // 七牛云的上传地址（华东区）
          qiniuaddr: "http://qpsn4bogq.hb-bkt.clouddn.com", // 七牛云的图片外链地址 七牛云空间的外链地址
          uploadPicUrl: "", //提交到后台图片地址
          fileList: [],
          page: 1,
          size: 5
        }
      },
      methods: {
        onClickLeft(){
          this.$router.go(-1);
        },
        formatter(type, val) {
          if (type === 'year') {
            return `${val}年`;
          } else if (type === 'month') {
            return `${val}月`;
          }
          return val;
        },
        showPopup() {
          this.show = true
        },
        showPopup1() {
          this.show1 = true
        },

        afterRead(file){
          console.log(file);  //控制台可以看见图片信息
          if(this.fileList.length > 1){
            this.fileList.splice(1);
            this.$msg({
              text:'只能选择这么多!',
              type:'info'
            })
          }
          axios.post("api/user/upload",{file:file}).then(res=>{
            alert("aaaa");
          })
        },
        handleRemove(file, fileList) {
          this.uploadPicUrl = "";
        },
        handleExceed(files, fileList) {
          this.$message.warning(
            `当前限制选择 4 张图片，如需更换，请删除上一张图片在重新选择！`
          );
        },
        beforeAvatarUpload(file, response) {   //图片上传之前的方法

          this.QiniuData.data = file;
          console.log(this.QiniuData.key)
        },
        uploadSuccess(response, file, fileList) {  //图片上传成功的方法
          this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
          //console.log(this.uploadPicUrl);
          axios.post("api/user/updateinformation",{id:this.userid,headPhoto:this.uploadPicUrl}).then(res=>{
            if(res.data.code==200){
              this.show=false;
              Notify({ type: 'success', message: '上传成功' });
            }
          })
        },
        uploadError(err, file, fileList) {    //图片上传失败时调用
          this.$message({
            message: "上传出错，请重试！",
            type: "error",
            center: true
          });
        },
        beforeRemove(file, fileList) {
          // return this.$confirm(`确定移除 ${ file.name }？`);
        },
        getQiniuToken() {  //token
          axios.get("api/user/gettoken").then(res => {
            this.QiniuData.token = res.data;
            //console.log(res.data)
          })
        },
    updatebirthday(values){
          var parse = JSON.stringify(values);
          parse=parse.substring(1,11);
    axios.post("api/user/updateinformation",{id:this.userid,birthday:parse}).then(res=>{
      if(res.data.code==200){
        this.show1=false;
        Notify({ type: 'success', message: '修改成功' });
      }
    })
  }
      },
      mounted(){
        this.getQiniuToken();
      }
    }
</script>

<style scoped>

</style>
